<!DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*表明div下面的全是蓝色字体*/
        div {
            color: #00a2d4;
        }

        /*div里面的p（这个p是儿子/孙子都是需要变色的）才会变成红色*/
        div p {
            color: red;
        }

        /*用逗号分隔，div和pre共同使用这个绿色*/
        div, pre {
            color: #00A000;
        }

        /*这两个的区别就是：div和id之间有没有空格之分，*/

        /*div中  id为div1的儿子辈的p标签全变为黄色，*/
        div #div1 > p {
            color: yellow;
        }

        /*有id=div2的div的儿子辈（直接子元素）的p标签全变为黑色，*/
        div#div2 > p {
            color: #412dbe;
        }

        /*就是div标签中class=div2的才会变，*/
        div.div3 {
            color: #00A000;
        }

        /*就是div标签中class=div2的儿子辈的class=p1的p标签中的属性才会变成绿色，*/
        div.div4>p.p1{
            color:green;
        }
        .p1{
            color:blueviolet;
            font-size:20px;
        }

    </style>
</head>
<body>
<div>
    <pre id="div1">
    <p>div下面的所有的id=div1的标签下面儿子辈的p标签</p>
    </pre>
</div>
<hr>
<div id="div2">
    <p>id=div2儿子辈的p段落</p>
    <div>
        <p>id=div2中的div下的P段落</p>
    </div>
</div>
<hr>
<div>
    <p>div2</p>
</div>
<hr>
<p>div外边的p段落</p>
<pre>predivsamecolor</pre>
<div class="div3">
    div2
</div>
<hr>

<div class="div4">
    helloworld
    <p 	class="p1">
        class=div2下面的p标签的class=p1中的属性
    </p>
    <div>
        <p class="p1">class=div2的孙子辈的p标签属性</p>

    </div>
</div>


</body>
</html>
